import React, { Component } from 'react';
import {connect} from 'react-redux'
import moment from 'moment'
import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import {
  Form,
  Input,
  InputNumber,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
  message,
  Modal,
  Popover,
  Spin,
  DatePicker
} from 'antd';

// 引入自定义的组件
// 引入自定义操作
import { ChangeUserinfoActivate, SendTaskSaga } from '../../../../redux/actions/userinfo'
import { ChangeSpinACtivate } from '../../../../redux/actions/public';

import { ChangeMasterTasksDataActivate, UpdateMasterTaskSaga } from '../../../../redux/actions/taskMasterManagePage';

const { Option } = Select;

// 类似样式，调节方框的距离
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 6,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

class MasterUpdateTaskForm extends Component {

  state = {
    enddate: '',
  }


  // 点击修改按钮
  onFinish = (values) => {
    const { baseUserInfoState, userLoginState, ChangeMasterTasksDataActivate, UpdateMasterTaskSaga } = this.props
    const user_info = Object.assign(
      {}, 
      this.state, 
      {
        email: baseUserInfoState.email, 
        username: baseUserInfoState.username,
        isLogin: userLoginState.isLogin
      })
    values.enddate = moment(values.enddate).format('YYYY-MM-DD')
    ChangeMasterTasksDataActivate(values)
    UpdateMasterTaskSaga()
  };

  // 钩子
  componentDidUpdate(){
    const { userinfoState, ChangeUserinfoActivate } = this.props
    if (userinfoState.msg.length !== 0){
      if (userinfoState.msg === "success") {
        message.success("任务修改成功, 请等待审核")
        ChangeUserinfoActivate({msg: ''})
      } else{
        message.error("任务修改失败, 请检查网络")
      }
    } 
  }
  // 获取时间
  handleDate = (e) => {
      const date = moment(e).format('YYYY-MM-DD')
      this.setState({enddate: date})
  }


  render(){
    const { SpinState, baseUserInfoState, UpdateTaskMMPState } = this.props
    return (
      <Form
        {...formItemLayout}
        name="task"
        onFinish={this.onFinish}
        scrollToFirstError
      >
        <Form.Item
          name="tasktitle"
          label="任务标题"
          initialValue={UpdateTaskMMPState.tasktitle}
          rules={[
            {
              required: true,
              message: '请输入任务标题!',
            },
            {
                max: 50,
                message: '您输入的标题过长，请限定在50个字',
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="taskintro"
          label="任务介绍"
          initialValue={UpdateTaskMMPState.taskintro}
          rules={[
            {
              required: true,
              message: '请输入您的任务介绍!',
            },
          ]}
        >
          <Input.TextArea showCount maxLength={1000} />
        </Form.Item>

        <Form.Item
          name="typeid"
          label="任务类型"
          initialValue={UpdateTaskMMPState.typeid}
          rules={[
            {
              required: true,
              message: '请选择您的任务类型!',
            },
          ]}
        >
          <Select placeholder="您的任务类型" >
            <Option value="1">图片标注</Option>
            <Option value="2">文本分类</Option>
            <Option value="3">情感分析</Option>
            <Option value="4">零件检测</Option>
          </Select>
        </Form.Item>

        <Form.Item 
            name="bounty"
            label="任务赏金"
            initialValue={UpdateTaskMMPState.bounty}
            rules={[
                {
                  required: true,
                  message: '请输入您的任务赏金，必须为整数，最小金额为1，小数部分会四舍五入!',
                },
                // 自定义限制规则
                () => ({
                    validator(_, value) {
                        if (value > baseUserInfoState.money) {
                            return Promise.reject(new Error('您在系统上只有'+baseUserInfoState.money+'枚金币!'));
                        }
                        return Promise.resolve();
                    }
                })
              ]}
        >
            <InputNumber 
                style={{ width: 150 }}  
                min={1}
                precision={0}
            />
        </Form.Item>
        <Form.Item 
            name="enddate"
            label="任务截止"
            initialValue={moment(UpdateTaskMMPState.enddate, "YYYY-MM-DD")}
            rules={[
                {
                  required: true,
                  message: '请选择您的任务截止时间!',
                },
              ]}
        >
            <DatePicker 
                onChange={this.handleDate}
                locale={locale}
                placeholder='点击选择时间' 
                disabledDate={(current)=>{
                    // 限制时间得大于等于今天
                    return current && current <= moment().subtract(1, 'days').endOf('day')
                }}
            />
        </Form.Item>
        <Spin spinning={ SpinState.sendTask_activate } tip="任务修改中......">
          <Form.Item {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit">
              修改
            </Button>
          </Form.Item>
        </Spin>
      </Form>
    );
  }
};

export default connect(
  state => ({
    SpinState: state.PublicReducer.spinState,
    baseUserInfoState: state.PublicReducer.baseUserInfo,
    userLoginState: state.PublicReducer.userLoginState,
    userinfoState: state.UserInfoReducer.userinfo,

    UpdateTaskMMPState: state.TaskMasterManagePageReducer.updateTask,
  }),
  {
    ChangeUserinfoActivate,
    SendTaskSaga,
    ChangeSpinACtivate,

    ChangeMasterTasksDataActivate,
    UpdateMasterTaskSaga,
  }
)(MasterUpdateTaskForm) 